<template>
  <view class="system-settings">
    <up-cell-group class="group" :border="false">
      <up-cell
        :title="$t('system.settings.cell-1')"
        isLink
        @tap="handleAccountSetting"
      ></up-cell>
      <up-cell
        :title="$t('system.settings.cell-2')"
        :value="localeName"
        isLink
        @tap="showLanguageSwitching = true"
      ></up-cell>
      <!-- <up-cell
        :title="$t('system.settings.cell-3')"
        isLink
        @tap="contactUs"
      ></up-cell> -->
      <up-cell
        :title="$t('system.settings.cell-4')"
        :value="cacheSize + 'M'"
        isLink
        @tap="showCacheTips = true"
      ></up-cell>
      <up-cell
        :title="$t('system.settings.cell-5')"
        :value="`V${appVersion}(${appVersionCode})`"
        isLink
        @tap="handleUpdateApplication"
      ></up-cell>
      <up-cell
        :title="$t('system.settings.cell-6')"
        isLink
        @tap="handleLogOff"
      ></up-cell>
    </up-cell-group>
    <fixed-footer>
      <view class="actions">
        <up-button
          type="primary"
          size="large"
          shape="circle"
          @tap="showlogoutTips = true"
          >{{ $t("system.settings.logout") }}</up-button
        >
      </view>
    </fixed-footer>
    <up-modal
      v-model:show="showCacheTips"
      show-cancel-button
      :title="$t('system.settings.tips.title')"
      :confirm-text="$t('time.confirm')"
      :cancel-text="$t('time.cancel')"
      :content="$t('system.settings.clear.cache.tips')"
      @confirm="handleClearCache"
    ></up-modal>
    <up-modal
      v-model:show="showlogoutTips"
      show-cancel-button
      :title="$t('system.settings.tips.title')"
      :confirm-text="$t('time.confirm')"
      :cancel-text="$t('time.cancel')"
      :content="$t('system.settings.logout.tips')"
      @confirm="handleLogout"
    ></up-modal>
    <up-toast ref="uToastRef"></up-toast>
    <up-popup v-model:show="showUpdate" mode="center" closeable>
      <view class="update-version">
        <text class="version-title">{{
          i18Replace($t("system.settings.update.version.title"), {
            version: lastVersionInfo.version,
          })
        }}</text>
        <text class="version-content">{{
          $t("system.settings.update.version.content")
        }}</text>
        <image
          class="version-pic"
          :src="lastVersionInfo.downloadUrl"
          mode="aspectFill"
        ></image>
      </view>
    </up-popup>
    <multilingual
      :isShowPoup="showLanguageSwitching"
      :applicationLocale="applicationLocale"
      @handleSetLocale="(e) => (applicationLocale = e)"
      @handleClose="showLanguageSwitching = false"
    />
  </view>
</template>

<script setup>
import { onMounted, ref, computed } from "vue";
import { useI18n } from "vue-i18n";
import useCacheManagement from "@/composable/hooks/useCacheManagement.js";
import { useAppStore } from "@/store/app";
import { logoff, selectAppUpdate } from "@/apis/components/system";
import { compareVersions, i18Replace } from "@/utils/functions.js";
import { useLocaleStore } from "../../store/locale";
const store = useAppStore();
const localStore = useLocaleStore();
const { t } = useI18n();
const { appVersion, appVersionCode } = uni.getAppBaseInfo();

const handleAccountSetting = () => {
  uni.navigateTo({
    url: "/pages/account-setting/account-setting",
  });
};

const showLanguageSwitching = ref(false);
const locales = computed(() => [
  {
    text: t("locale.zh"),
    code: "zh-Hans",
  },
  {
    text: t("locale.en"),
    code: "en",
  },
  {
    text: t("locale.ja"),
    code: "ja",
  },
  {
    text: t("locale.it"),
    code: "it",
  },
]);
const localeName = computed(
  () =>
    locales.value.find((item) => item.code === localStore.GETAppLocale)?.text
);
const applicationLocale = computed(() => localStore.GETAppLocale);

const { cacheSize, getTotalCacheSize, clearTotalCache } = useCacheManagement();

const showCacheTips = ref(false);
const handleClearCache = async () => {
  await clearTotalCache();
  showCacheTips.value = false;
};

const showlogoutTips = ref(false);
const handleLogout = async () => {
  await store.logout();
  showlogoutTips.value = false;
  uni.redirectTo({
    url: "/pages/login/index",
  });
};

const handleLogOff = async () => {
  const { data } = await logoff();
  plus.runtime.openURL(data);
};

const uToastRef = ref(null);
const showUpdate = ref(null);
const lastVersionInfo = ref(null);
const handleUpdateApplication = async () => {
  if (lastVersionInfo.value) {
    showUpdate.value = true;
    return;
  }
  const { version, downloadUrl } = await selectAppUpdate();
  // 当前版本小于最新版本
  if (compareVersions(appVersion, version) === -1) {
    lastVersionInfo.value = {
      version,
      downloadUrl,
    };
    showUpdate.value = true;
  } else {
    uToastRef.value.show({
      position: "bottom",
      message: t("system.settings.update.version.tips"),
    });
  }
};

// 联系我们
const contactUs = () => {
  uni.navigateTo({
    url: "/pages/contact-us/contact-us",
  });
};

uni.onLocaleChange(() => {
  store.refreshUserInfo();
});

onMounted(() => {
  getTotalCacheSize();
});
</script>

<style lang="scss">
.system-settings {
  padding: 24rpx 32rpx;

  .group {
    border-radius: 16rpx;
  }

  .actions {
    padding: 0 24rpx;
  }

  & ::v-deep .u-toast {
    &__content {
      background: #222d49;
      padding: 24rpx;
      border-radius: 16rpx;
      width: 500rpx;
      justify-content: center;

      &__text {
        font-size: 32rpx;
        line-height: 1;
        color: #aeaeae;
      }
    }
  }

  .update-version {
    padding: 48rpx 64rpx;
    width: 560rpx;
    box-sizing: border-box;
    @include flex(column);
    align-items: center;

    .version-title {
      font-size: 46rpx;
      font-weight: 500;
      color: #ddd;
      margin-bottom: 48rpx;
    }

    .version-content {
      font-size: 30rpx;
      font-weight: 400;
      line-height: 1.6;
      color: #808080;
      margin-bottom: 48rpx;
    }

    .version-pic {
      width: 240rpx;
      height: 240rpx;
    }
  }
}
</style>
